<template>
	<view>
		<view class="bg_top">
			<view class="context">
				<view>
					<view style="display: flex;">
						<view>当前积分</view>
						<view style="color: #664E20;width: 44rpx; height: 28rpx;text-align: center;
	line-height: 28rpx;font-size: 20rpx;background-color: #FDCE9A;margin-left: 10rpx;">明细</view>
						<u-icon name="arrow-right" color="#fff" style="padding-left: 7rpx;" size="12"></u-icon>
					</view>
					<view style="font-size: 20rpx;color: #fff;display: flex;align-items: flex-end;padding-top: 33rpx;">
						<view style="font-size: 60rpx;">20</view><view style="padding-left: 8rpx;">积分</view>
					</view>
					<view style="font-size: 18rpx;color: rgba(255,255,255,0.6);padding-top: 23rpx;">
						温馨提示：为避免积分过期，请尽快使用
					</view>
				</view>
				<view style="text-align: center;">
					<view style="display: flex;align-items: center;">
					<image mode="aspectFill" src="../../../static/shop/Frame (1).png" style="width: 30rpx;height: 30rpx;" />
					<view style="font-size: 20rpx;padding-left: 5rpx;">积分订单</view>
					</view>
					<view style="padding-top: 11rpx;">
						<image mode="aspectFill" src="../../../static/shop/Group 37.png" style="width: 86rpx;height: 86rpx;" />
						<view style="padding-top: 11rpx;font-size: 20rpx;">积分抽奖</view>
					</view>
				</view>
			</view>
			<view class="context_bottom">
				<view class="jfrw">积分任务</view>
				<view class="xrrw">新人任务积分礼包</view>
			</view>
		</view>
		
		<view class="detail_top">
			<view style="line-height: 50rpx;">积分分类</view>
			<view style="line-height: 50rpx;font-weight: bold;
letter-spacing: 4rpx;">CLASSIFOCATION</view>
		</view>
		<view class="shop_list">
			<view class="item">
				<view class="item_bg">
					优惠券
				</view>
			</view>
			<view class="item">
				<view class="item_bg">
					氢氧周边
				</view>
			</view>
			<view class="item">
				<view class="item_bg">
					健康生活
				</view>
			</view>
		</view>
		
		<view class="detail_top">
			<view style="line-height: 50rpx;">热门积分商品</view>
			<view style="line-height: 50rpx;font-weight: bold;
letter-spacing: 4rpx;">POPULARPOLNTPRODUCTS</view>
		</view>
		
		<view style="display: flex;margin-top: 4rpx;justify-content: space-between;flex-wrap: wrap;padding: 20rpx;">
			<view class="card_item" v-for="item in 4" :key="item" @click="godetail">
				<image mode="aspectFill" src="../../../static/index/1130 1.png" style="width: 100%;height: 341rpx;" />
				<view style="font-size: 15rpx;line-height: 30rpx;padding-left: 8rpx;">
					<view>POPULARPOLNTPRODUCTS</view>
					<view style="font-weight: bold;font-size: 20rpx;">200000<text style="font-weight: 100;font-size: 15rpx;padding-left: 6rpx;">积分</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			godetail(){
				uni.navigateTo({
					url:"../product_detail/product_detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop_list{
		display:flex;
		width: 100%;
		padding: 20rpx 31rpx;
		height: 249rpx;
		justify-content: space-between;
		.item{
			height: 100%;width: 209rpx;
			background: url('../../../static/index/1130 1.png') no-repeat;
			border-radius: 10rpx;
			background-size: cover;
			position: relative;
			.item_bg{
				background: url('../../../static/shop/Intersect.png') no-repeat;background-size: 100% 100%;position: absolute;width: 101rpx;left:-2rpx;height: 41rpx;font-size: 15rpx;color: #664C1A;text-align: center;line-height: 41rpx;
			}
		}
	}
	.detail_top{
		width: 100%;
		margin-top: 32rpx;
		font-size: 25rpx;
		color: #000;
		text-align: center;
	}
.bg_top {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 314rpx;
		background: url("../../../static/shop/Rectangle 163.png") no-repeat;
		background-size: cover;
		.context{
			padding: 45rpx 53rpx 0rpx 53rpx;
			color: #fff;
			font-size: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.context_bottom{
			padding: 45rpx 53rpx;
			color: #fff;
			font-size: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 56rpx;
			.jfrw{
				background: url('../../../static/shop/Rectangle 191.png') no-repeat;
				background-size: cover;
				width: 276rpx;
				height: 56rpx;
				text-align: center;
			}
			.xrrw{
				background: url('../../../static/shop/Rectangle 192.png') no-repeat;
				background-size: cover;
				width: 377rpx;
				height: 56rpx;
				text-align: center;
			}
		}
	}
	.card_item{
		width: 341rpx;
		height: 422rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 8rpx 2rpx rgba(197,197,197,0.25);
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 39rpx;
	}
</style>
